<template>
  <div>
    登录

    <u-form :model="form" :rules="rules" ref="form">
      <u-form-item label="" prop="username">
        <u-input
          placeholder="请输入账号"
          v-model="form.username"
          border="none"
          shape="circle"
          prefixIcon="account"
          prefixIconStyle="font-size: 24px;"
          clearable
        >
        </u-input>
      </u-form-item>
      <u-form-item label="" prop="password">
        <u-input
          placeholder="请输入密码"
          border="none"
          v-model="form.password"
          shape="circle"
          prefixIcon="lock"
          prefixIconStyle="font-size: 24px;"
          type="password"
          clearable
        >
        </u-input>
      </u-form-item>
      <u-form-item prop="code">
        <u-input
          v-model="form.code"
          border="none"
          placeholder="请输入验证码"
          shape="circle"
          prefixIcon="checkmark-circle"
          clearable
        >
          <template slot="suffix">
            <u-image
              :showLoading="true"
              v-if="codeUrl != ''"
              :src="codeUrl"
              width="100%"
              height="60px"
              @click="getImageCode"
            ></u-image>
            <!-- <u-code
              ref="uCode"
              @change="codeChange"
              seconds="20"
              changeText="X秒重新获取"
            ></u-code>
            <u-button
              @tap="getCode"
              :text="tips"
              type="primary"
              shape="circle"
            ></u-button> -->
          </template>
        </u-input>
      </u-form-item>
      <!-- <u-form-item prop="code">
        <u-input
          v-model="form.code"
          border="none"
          placeholder="请输入验证码"
          shape="circle"
          prefixIcon="checkmark-circle"
          clearable
        >
          <template slot="suffix">
            <u-code
              ref="uCode"
              @change="codeChange"
              seconds="20"
              changeText="X秒重新获取"
            ></u-code>
            <u-button
              @tap="getCode"
              :text="tips"
              type="primary"
              shape="circle"
            ></u-button>
          </template>
        </u-input>
      </u-form-item> -->
      <!-- <view class="forget">
          <navigator url="/pages/ucenter/account/forget">忘记密码?</navigator>
        </view> -->
      <view class="bottom-button">
        <u-button
          type="primary"
          shape="circle"
          size="large"
          text="登录"
          @click="beforeSubmit"
        ></u-button>
      </view>
    </u-form>

    <!-- 图片验证码 -->
    <m-image-code
      ref="mImageCode"
      :show="show"
      @imageData="imageData"
      @setCode="setCode"
      @cancel="onCancel"
    >
    </m-image-code>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      // 验证码开关
      captchaOnOff: true,
      form: {
        username: "admin",
        password: "admin123",
        code: "",
      },
      rules: {
        username: {
          type: "string",
          required: true,
          message: "请填写账户",
          trigger: ["blur", "change"],
        },
        password: {
          type: "string",
          required: true,
          message: "请填写密码",
          trigger: ["blur", "change"],
        },
        code: {
          type: "string",
          required: true,
          len: 4,
          message: "请填写4位验证码",
          trigger: ["blur"],
        },
      },
    };
  },
  onLoad() {
    let that = this;
    that.getImageCode();
  },
  onBackPress(options) {
    return true;
  },
  methods: {
    // 获取图片验证码
    getImageCode() {
      this.$u.api.account
        .getImage()
        .then((res) => {
          this.captchaOnOff =
            res.data.captchaOnOff === undefined ? true : res.data.captchaOnOff;
        })
        .catch(() => {});
    },
    // 提交前图形验证
    beforeSubmit() {
      // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
      this.$refs.form
        .validate()
        .then((res) => {
          if (this.captchaOnOff) {
            // this.getImageCode()
            this.show = true;
          } else {
            this.toLogin();
          }
        })
        .catch((errors) => {
          // uni.$u.toast('校验失败')
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
